<template>
	<view>
		<u-sticky :offset-top="0" :h5-nav-height="0">
			<u-tabs :list="tabsList"  :current="current" @change="change" active-color="rgb(0, 201, 219)"></u-tabs>
		</u-sticky>
		<u-empty text="暂无产品" class="mt200" v-if="productsList.length <= 0"></u-empty>
		<u-waterfall v-else v-model="productsList" ref="uWaterfall">
			<template v-slot:left="{ leftList }">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goPage('/pages/product_details/product_details?id=' + item.id)">
					<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title line2">{{ item.name }}</view>
					<view class="demo-price" style="color: #FFD323;"><text class="xs">￥</text>{{ item.min_price }}元</view>
					<view class="xs" style="color: #CACACA;">已售{{ item.sales_sum }}件</view>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goPage('/pages/product_details/product_details?id=' + item.id)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title line2">{{ item.name }}</view>
					<view class="demo-price" style="color: #FFD323;"><text class="xs">￥</text>{{ item.min_price }}元 </view>
					<view class="xs" style="color: #CACACA;">已售{{ item.sales_sum }}件</view>
				</view>
			</template>
		</u-waterfall>
	</view>
</template>

<script>
	import {
		ProductCategory
	} from '@/api/merchant';
	export default {
		data() {
			return {
				tabsList: [],
				current: 0,
				productsList: [],
				data: []
			};
		},
		onLoad(option) {
			ProductCategory({
				merchant_id: option.merchant_id
			}).then(res => {
				if (res.code == 1) {
					this.data = res.data;
					for(var key in res.data){
						this.tabsList.push({
							name:res.data[key].name
						})
					}
					this.product();
				}
			})
		},
		methods: {
			goPage(url) {
				// if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				})
			},
			product(){
				this.productsList = [];
				this.productsList = this.data[this.current].lists;
			},
			change(index) {
				this.current = index;
				this.product();
			}
		}
	};
</script>

<style lang="scss">
	.mt200{
		margin-top: 200rpx  !important;
	}
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.demo-img-wrap {
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
	word-break: break-all;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: $u-type-error;
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	border: 1px solid $u-type-primary;
	color: $u-type-primary;
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 30rpx;
	color: $u-type-error;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}
</style>
